<template>
  <div class="lix-cell" @click="bindtap">
    <div class="lix-cell__container" :style="{height: height + 'rpx', backgroundColor: bgColor}">
      <div class="lix-cell__title">{{ label }}</div>
      <div class="lix-cell__content">
        <div class="lix-cell__value" v-if="value">{{ value }}</div>
        <div class="lix-cell__avatar" v-if="isAvatar">
          <open-data type="userAvatarUrl"></open-data>
        </div>
        <image src="../../static/image/arrow_down.png" class="lix-cell__arrow" v-if="isLink"/>
        <div class="weui-rate-wrap" v-if="rate">
          <ul class="weui-rate">
            <li class="weui-rate-item" v-for="(n, index) in max" :key="index" :class="{'weui-rate-item-active' : index <= rate}" :data-index='index'>
              <div class="weui-rate-item-def"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="lix-cell__seperate"></div>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 120
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    label: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    },
    isLink: {
      type: Boolean,
      default: false
    },
    isAvatar: {
      type: Boolean,
      default: false
    },
    rate: {
      type: Number,
      default: null
    },
    max: {
      type: Number,
      default: 5
    }
  },
  created() {
  },
  methods: {
    bindtap(e) {
      this.$emit('tap');
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/mixins/mixins";
@import "../theme-chalk/_main";
@import "../theme-chalk/_rate";

@include b(cell) {
  @include e(container) {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
  }

  @include e(title) {
    font-size: 17px;
    color: #353b39;
  }

  @include e(content) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  @include e(avatar) {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
  }

  @include e(arrow) {
    margin-left: 10px;
    width: 15px;
    height: 15px;
  }

  @include e(seperate) {
    margin-left: 20px;
    height: 2rpx;
    background-color: #e5e5e5;
  }

  @include e(value) {
    font-size: 14px;
    color: #b4b4b4;
  }
}
</style>
